<template>
  <div class="hello">
    <!-- 初始化echarts需要有个宽高的盒子 -->
  
    <template >
         <div ref="fymapbox" style="height: 12rem; width: 100%" class="fymp"></div>
    </template>
  </div>
</template>
<script>
import echarts from "echarts";
import "echarts/map/js/china.js";
import jsonp from "jsonp";
// 绘制地图

//获取屏幕宽度并计算比例
	function fontSize(res){
    	let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
        if (!clientWidth) return;
        let fontSize = 100 * (clientWidth / 1920);
        return res*fontSize;
	}

const option = {
  title: {
    text: "最新疫情地图", //显示标题
    textStyle:{
     fontSize: fontSize(0.7)
    }
  },
   tooltip: {
      trigger: 'item'
    },
  series: [
    {
      name: "确诊人数", //鼠标移动提示文字 在显示人数上面
      type: "map", //告诉echarts 要去渲染地图
      map: "china", //告诉echart 要去渲染中国地图
      label: {
        //控制显示对于地区的汉字
        show: true,
        color: "#545454", //控制地区名的字体颜色
         fontSize: fontSize(0.5)
      },
      itemStyle: {
        areaColor: "white", //设置地图背景色
         borderColor: "#33ccff", //设置地图边线颜色
      },
      roam: false, //支持滚轮放大缩小 以及拖拽
      zoom: 1.2, //控制地图的放大和缩小
      emphasis: {
        //控制鼠标滑过之后的背景色和字体颜色
        label: {
          color: "#000",
          fontSize: 12,
        },
        itemStyle: {
          areaColor: "#33ccff",
          borderColor: "#33ccff",
        },
      },
      data: [], //用来展示后台给的数据
    },
  ],
  visualMap: [
    {
      type: "piecewise",
      show: true,
       itemWidth:10,
       itemHeight:10,
        left:"left",
         textGap:1,
         itemGap: 2,
      pieces: [
       
        //分段
        { min: 10000 },
        { min: 1000, max: 9999 },
        { min: 100, max: 999 },
        { min: 10, max: 99 },
        { min: 0 , max:9},
      ],
      //  orient:'horizontal', //修改横向显示 默认垂直显示
      inRange: {
        symbol: "rect", //显示数据方块小图标形状
        color: ["#fff", "#DE2509"], // 显示颜色
      },
    },
  ],
};

//使用地图 需要先注册地图
export default {
  name: "HelloWorld",
  mounted() {
    this.getData();
    //创建mychart实例
    this.mychart = echarts.init(this.$refs.fymapbox);
    this.mychart.setOption(option); //加载option
  },
  methods: {
    getData() {
      //从新浪取到json数据
      jsonp(
        `https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=${yqTime}`,
        {},
        (err, data) => {
          if (!err) {
            console.log(data);
            //代表数据请求成功
            let list = data.data.list.map((item) => ({
              name: item.name,
              value: item.econNum,
            }));
            option.series[0].data = list; //将数据赋给series里面的data然后进行渲染
            //能够执行的前提是DOM已经渲染完成，只有DOM渲染完成才能够执行echarts的初始化
            this.mychart.setOption(option);
          }
        }
      );
    },
  },
};
// 实时更新疫情数据
let yqTime = setInterval(function () {
  let fyTime = new Date().valueOf();
}, 3600000);
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.fymp{
  background-color:#fff;
   border: 1px solid #bbb;
 border-radius: 10px;
}
.title{
  font-weight: 600;
  font-size: 0.5rem;
}
</style>